@charset "UTF-8";
/*オープニングアニメーションのGIF*/
.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}
.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 760px) {
  .loading-animation img {
    width: 100vw;
    height: 100vh;
  }
}
/*全ページ共通部分*/
body {
  background-color: rgb(250, 235, 158);
}
body::before, body::after {
  content: "";
  position: fixed;
  /*固定表示*/
  top: 0;
  width: 50vw;
  height: 100vh;
  background: rgb(244, 101, 74);
  /*劇のカーテン色*/
  -webkit-animation: curtainOpen 1s forwards;
          animation: curtainOpen 1s forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  /*遅延時間(遅延時間)*/
  z-index: 999;
  /*最前面に*/
}
body::before {
  left: 0;
}
body::after {
  right: 0;
}

/***カーテンのように開くアニメーション***/
@-webkit-keyframes curtainOpen {
  0% {
    opacity: 1;
    width: 50vw;
    /*閉じている状態*/
  }
  50% {
    opacity: 1;
    /*半分までは不透明*/
  }
  100% {
    opacity: 0;
    /*透明*/
    width: 0;
    /*開く*/
    visibility: hidden;
    /*非表示に*/
  }
}
@keyframes curtainOpen {
  0% {
    opacity: 1;
    width: 50vw;
    /*閉じている状態*/
  }
  50% {
    opacity: 1;
    /*半分までは不透明*/
  }
  100% {
    opacity: 0;
    /*透明*/
    width: 0;
    /*開く*/
    visibility: hidden;
    /*非表示に*/
  }
}
header {
  background: rgb(255, 194, 75);
  border-bottom: 1px solid;
  border-color: rgb(183, 183, 183);
}
@media screen and (max-width: 481px) {
  header {
    height: 70px;
  }
}
header .img_rogo {
  padding: 0px 0 10px 10px;
  position: fixed;
}
header .img_rogo img {
  width: 170px;
  height: 100px;
  transition: all 0.5s ease-out;
}
@media screen and (max-width: 481px) {
  header .img_rogo img {
    width: 130px;
    height: 70px;
  }
}
header .img_rogo img:hover {
  /*1.1倍に拡大*/
  transform: scale(1.1);
}
header nav {
  display: flex;
  height: 100px;
  align-items: center;
  margin: 0 0 0 100px;
}

.list_nav_header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  justify-content: space-around;
  list-style: none;
  font-weight: bold;
  font-family: "BioRhyme", serif; /*googolefont*/
  color: rgb(101, 211, 255);
  text-shadow: 0 3px 3px black;
  font-size: 30px;
  margin: 0 0 0 250px;
}
@media screen and (max-width: 1350px) {
  .list_nav_header {
    font-size: 25px;
    gap: 30px;
    margin: 0 0 0 150px;
  }
}
@media screen and (max-width: 760px) {
  .list_nav_header {
    display: none;
  }
}
.list_nav_header li a {
  /* アンダーラインの位置の基準 */
  position: relative;
  display: inline-block;
  text-decoration: none;
  /* 疑似要素生成 */
}
.list_nav_header li a::after {
  position: absolute;
  bottom: -7px;
  left: 0;
  /* 疑似要素内のテキストを''に */
  content: "";
  width: 100%;
  height: 3px;
  background: rgb(101, 211, 255);
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s;
}
.list_nav_header li a:hover::after {
  transform: scale(1, 1);
}

header a {
  color: inherit;
  text-decoration: none;
}

/* タイトルや見出しなどのフォント*/
.wf-mplus1p {
  font-family: "M PLUS Rounded 1c";
  color: rgb(91, 91, 91);
}

/* バーガー */
.burger {
  width: 50px;
  height: 50px;
  background-image: url(../img/burger.svg);
  background-size: 40px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2;
}
@media screen and (min-width: 760px) {
  .burger {
    display: none;
  }
}
.burger:hover {
  background-color: #ddd;
}
.burger.is-active {
  background-image: url(../img/close.svg);
}

/* メニュー */
.menu {
  color: rgb(250, 235, 158);
  display: flex;
  display: none;
  text-align: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(75, 75, 75);
  position: fixed;
  top: 0;
  right: 0;
  border-radius: 50px;
  z-index: 1;
}
.menu.is-active {
  display: flex;
}
.menu .list_menu {
  display: inline-block;
  text-align: left;
  list-style-position: inside;
  padding-top: 40px;
  font-size: 30px;
  font-family: "BioRhyme", serif; /*googolefont*/
  line-height: 2.2;
  letter-spacing: 2px;
}
.menu .list_menu li {
  /*アニメーションの速度設定*/
  transition: all 0.5s ease-out;
}
.menu .list_menu li:hover {
  font-size: 35px;
  color: rgb(75, 75, 75);
  background-color: rgb(250, 235, 158);
  border-radius: 5px;
  /*1.1倍に拡大*/
  transform: scale(1.1);
}

/*ホームページ*/
.mushimegane img {
  position: absolute;
  width: 100vw;
  z-index: -1;
}
@media screen and (max-width: 760px) {
  .mushimegane img {
    top: 300px;
  }
}

/* 雪をjsで降らしている */
.snow {
  background-color: gold; /*通常用*/
  border: solid 1px #000;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: snowFall 10s linear;
          animation: snowFall 10s linear;
  z-index: 2;
}

@-webkit-keyframes snowFall {
  0% {
    opacity: 0;
    top: 0;
    transform: translateX(5px);
  }
  10% {
    opacity: 1;
    transform: translateX(-5px);
  }
  30% {
    transform: translateX(5px);
  }
  40% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
  }
}

@keyframes snowFall {
  0% {
    opacity: 0;
    top: 0;
    transform: translateX(5px);
  }
  10% {
    opacity: 1;
    transform: translateX(-5px);
  }
  30% {
    transform: translateX(5px);
  }
  40% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100vh;
  }
}
.main_CHOUSEN {
  margin: 50px;
  font-family: "BioRhyme", serif;
  text-shadow: 2px 6px 3px black;
}
@media screen and (max-width: 760px) {
  .main_CHOUSEN {
    margin: 50px 0 0 20px;
  }
}
.main_CHOUSEN h1 {
  font-size: 100px;
  color: gold;
}
@media screen and (max-width: 760px) {
  .main_CHOUSEN h1 {
    font-size: 60px;
  }
}
@media screen and (max-width: 481px) {
  .main_CHOUSEN h1 {
    font-size: 40px;
    text-shadow: 0 4px 4px black;
  }
}
.main_CHOUSEN h1 .puru {
  width: 100px;
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-name: purupuru;
          animation-name: purupuru;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@media screen and (max-width: 760px) {
  .main_CHOUSEN h1 .puru {
    width: 60px;
  }
}
@media screen and (max-width: 481px) {
  .main_CHOUSEN h1 .puru {
    width: 40px;
  }
}
@-webkit-keyframes purupuru {
  0% {
    transform: translateY(15px) translateX(-5px) skewX(9deg);
  }
  10% {
    transform: translateY(15px) translateX(-5px) skewX(-8deg);
  }
  20% {
    transform: translateY(15px) translateX(-5px) skewX(7deg);
  }
  30% {
    transform: translateY(15px) translateX(-5px) skewX(-6deg);
  }
  40% {
    transform: translateY(15px) translateX(-5px) skewX(5deg);
  }
  50% {
    transform: translateY(15px) translateX(-5px) skewX(-4deg);
  }
  60% {
    transform: translateY(15px) translateX(-5px) skewX(3deg);
  }
  70% {
    transform: translateY(15px) translateX(-5px) skewX(-2deg);
  }
  80% {
    transform: translateY(15px) translateX(-5px) skewX(1deg);
  }
  90% {
    transform: translateY(15px) translateX(-5px) skewX(0deg);
  }
  100% {
    transform: translateY(15px) translateX(-5px) skewX(0deg);
  }
}
@keyframes purupuru {
  0% {
    transform: translateY(15px) translateX(-5px) skewX(9deg);
  }
  10% {
    transform: translateY(15px) translateX(-5px) skewX(-8deg);
  }
  20% {
    transform: translateY(15px) translateX(-5px) skewX(7deg);
  }
  30% {
    transform: translateY(15px) translateX(-5px) skewX(-6deg);
  }
  40% {
    transform: translateY(15px) translateX(-5px) skewX(5deg);
  }
  50% {
    transform: translateY(15px) translateX(-5px) skewX(-4deg);
  }
  60% {
    transform: translateY(15px) translateX(-5px) skewX(3deg);
  }
  70% {
    transform: translateY(15px) translateX(-5px) skewX(-2deg);
  }
  80% {
    transform: translateY(15px) translateX(-5px) skewX(1deg);
  }
  90% {
    transform: translateY(15px) translateX(-5px) skewX(0deg);
  }
  100% {
    transform: translateY(15px) translateX(-5px) skewX(0deg);
  }
}
.main_CHOUSEN span {
  font-size: 50px;
  color: gold;
}
@media screen and (max-width: 760px) {
  .main_CHOUSEN span {
    font-size: 40px;
  }
}
@media screen and (max-width: 481px) {
  .main_CHOUSEN span {
    font-size: 20px;
    text-shadow: 0 2px 3px black;
  }
}
.main_CHOUSEN h2 {
  font-size: 30px;
  color: aliceblue;
}
.main_CHOUSEN h3 {
  font-size: 20px;
  color: aliceblue;
  padding: 0 0 0 165px;
}
@media screen and (max-width: 760px) {
  .main_CHOUSEN h3 {
    padding: 0 0 0 50px;
  }
}

@media screen and (max-width: 481px) {
  .main_CHOUSEN h3, .main_CHOUSEN h2 {
    font-size: 15px;
    text-shadow: 0 2px 3px black;
  }
}
/*Aboutページ*/
.about_one {
  text-align: center;
  padding: 20px 0 20px 0;
  font-size: 30px;
}
@media screen and (max-width: 481px) {
  .about_one {
    padding: 20px 0 10px 0;
    font-size: 20px;
  }
}
.about_one span {
  background: linear-gradient(transparent 80%, rgb(244, 101, 74) 80%);
  text-shadow: 0 5px 5px silver;
  font-size: 50px;
}
@media screen and (max-width: 1000px) {
  .about_one span {
    font-size: 40px;
    text-shadow: 0 2px 2px silver;
  }
}
@media screen and (max-width: 481px) {
  .about_one span {
    font-size: 25px;
  }
}
.about_one .fa-question {
  font-size: 50px;
}
@media screen and (max-width: 1000px) {
  .about_one .fa-question {
    font-size: 45px;
  }
}
@media screen and (max-width: 481px) {
  .about_one .fa-question {
    font-size: 35px;
  }
}

.kitakubuLogo {
  transform: translateX(-10px) translateY(20px);
  width: 30%;
}
@media screen and (max-width: 481px) {
  .kitakubuLogo {
    width: 40%;
    transform: translateX(-5px) translateY(10px);
  }
}

.about_two p {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  background: #FFF;
  text-align: justify;
  width: 60vw;
  margin: 0 auto 20px;
  padding: 20px 30px 20px 30px;
  border-radius: 20px;
  border: 2px solid rgb(255, 170, 0);
  font-size: 30px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 2px;
}
.about_two p .fa-check {
  color: red;
  margin-right: 10px;
}
@media screen and (max-width: 760px) {
  .about_two p {
    width: 70vw;
    font-size: 20px;
    font-weight: none;
    line-height: none;
    letter-spacing: none;
  }
}
@media screen and (max-width: 481px) {
  .about_two p {
    padding: 15px 20px 15px 20px;
    width: 80vw;
  }
}
.about_two p span {
  background: linear-gradient(transparent 90%, rgb(244, 101, 74) 90%);
}

.characterIntroduction {
  font-size: 30px;
  padding: 10px 0 15px 0;
  text-align: center;
}
@media screen and (max-width: 760px) {
  .characterIntroduction {
    font-size: 20px;
  }
}
.characterIntroduction span {
  background: linear-gradient(transparent 90%, rgb(244, 101, 74) 90%);
}

/* キャラクター紹介 */
.character {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  background: #FFF;
  text-align: justify;
  width: 60vw;
  margin: 0 auto 20px;
  padding: 20px 30px 20px 30px;
  border-radius: 20px;
  border: 2px solid rgb(255, 170, 0);
  font-size: 30px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
@media screen and (max-width: 760px) {
  .character {
    width: 70vw;
    font-size: 20px;
    font-weight: none;
    line-height: none;
    letter-spacing: none;
  }
}
@media screen and (max-width: 481px) {
  .character {
    padding: 15px 20px 15px 20px;
    width: 80vw;
  }
}

/* JavaScriptで追加したクラス */
/* スクロールで.characterを表示 */
.show {
  opacity: 1;
  transform: none;
}

.character h3 {
  background: linear-gradient(transparent 90%, rgb(255, 247, 0) 90%);
}
.character p span {
  color: rgb(244, 101, 74);
}
.character .member img {
  width: 20vw;
}

.member {
  float: left;
  cursor: pointer;
}

/* JavaScriptで追加したクラス */
/* きたスピ */
.move_one {
  -webkit-animation: jump 0.5s ease-in-out 2;
          animation: jump 0.5s ease-in-out 2;
}

@-webkit-keyframes jump {
  /* scale(X軸の値, Y軸の値) */
  0% {
    transform: scale(1) translate(0, 0);
  }
  /* translate(X軸の方向の距離, Y軸の方向の距離) */
  50% {
    transform: scale(2, 0.5) translate(0, -300px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

@keyframes jump {
  /* scale(X軸の値, Y軸の値) */
  0% {
    transform: scale(1) translate(0, 0);
  }
  /* translate(X軸の方向の距離, Y軸の方向の距離) */
  50% {
    transform: scale(2, 0.5) translate(0, -300px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
/* メススピ */
.move_two {
  -webkit-animation: poyopoyo 1s ease-in-out 1;
          animation: poyopoyo 1s ease-in-out 1;
}

@-webkit-keyframes poyopoyo {
  0%, 40% {
    /* skewで傾斜をつけている */
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(15deg, 15deg);
  }
  10% {
    transform: skew(-12deg, -12deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

@keyframes poyopoyo {
  0%, 40% {
    /* skewで傾斜をつけている */
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(15deg, 15deg);
  }
  10% {
    transform: skew(-12deg, -12deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
/*Planページ*/
#planTitle {
  font-size: 50px;
  margin: 50px auto 20px auto;
  padding: 20px;
  text-align: center;
  width: 350px;
  border: 4px solid rgb(75, 75, 75);
  border-radius: 5px;
  background-color: rgb(239, 239, 239);
}
#planTitle .fa-lightbulb {
  color: gold;
  text-shadow: 0 0 3px #000;
}
@media screen and (max-width: 481px) {
  #planTitle {
    width: 200px;
    font-size: 25px;
  }
}

/*Plan ラジオページ*/
.fa-tower-cell {
  font-size: 50px;
  padding-left: 5px;
}
@media screen and (max-width: 1000px) {
  .fa-tower-cell {
    font-size: 45px;
  }
}
@media screen and (max-width: 481px) {
  .fa-tower-cell {
    font-size: 35px;
  }
}

.fa-face-smile {
  color: rgb(244, 101, 74);
  text-shadow: 0 0 2px #000;
}

.radioLogo {
  width: 100%;
}

/*Plan アンケート*/
.leaf-container {
  /* コンテナからはみ出した要素を隠す */
  overflow: hidden;
}

.leaf {
  background-size: contain;
  background-position: center;
  position: absolute;
  -webkit-animation: leafFall 12s linear;
          animation: leafFall 12s linear;
  z-index: 2;
}

.leaf-1 {
  background-image: url(..img/momiji.png);
}

.leaf-2 {
  background-image: url(..img/icyou.png);
}

.leaf-3 {
  background-image: url(..img/happa.png);
}

@-webkit-keyframes leafFall {
  0% {
    top: -100px;
    transform: translateX(0px) rotate(0deg);
  }
  10% {
    transform: translateX(-5px) rotate(-90deg);
  }
  30% {
    transform: translateX(5px) rotate(-18deg);
  }
  60% {
    transform: translateX(-5px) rotate(-270deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 130vh;
    transform: translateX(0px) rotate(-360deg);
  }
}

@keyframes leafFall {
  0% {
    top: -100px;
    transform: translateX(0px) rotate(0deg);
  }
  10% {
    transform: translateX(-5px) rotate(-90deg);
  }
  30% {
    transform: translateX(5px) rotate(-18deg);
  }
  60% {
    transform: translateX(-5px) rotate(-270deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 130vh;
    transform: translateX(0px) rotate(-360deg);
  }
}
/* Planページ共通 */
#planaruaruMain {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

#planaruaruTitle {
  position: relative;
  display: inline-block;
  font-size: 50px;
  margin: 50px auto 5px auto;
}
#planaruaruTitle:before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50px;
  height: 5px;
  background-color: rgb(91, 91, 91);
  transform: translateX(-110%);
}
@media screen and (max-width: 481px) {
  #planaruaruTitle:before {
    width: 25px;
    height: 3px;
  }
}
#planaruaruTitle:after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 50px;
  height: 5px;
  background-color: rgb(91, 91, 91);
  transform: translateX(10%);
}
@media screen and (max-width: 481px) {
  #planaruaruTitle:after {
    width: 25px;
    height: 3px;
  }
}
@media screen and (max-width: 481px) {
  #planaruaruTitle {
    font-size: 25px;
  }
}

#planaruaruSubtitle {
  font-size: 35px;
  padding: 10px 0 20px 0;
}
@media screen and (max-width: 481px) {
  #planaruaruSubtitle {
    font-size: 20px;
  }
}

/* ここまで共通 */
.planaruaru_div {
  text-align: center;
}
.planaruaru_div .planaruaru_p {
  padding-bottom: 20px;
  font-size: 30px;
  line-height: 1.5;
  /* 子要素にinline-block & left */
  /* これで中央寄せの左寄せになる */
  text-align: left;
  display: inline-block;
}
.planaruaru_div .planaruaru_p span {
  font-weight: bold;
  color: rgb(244, 101, 74);
}
@media screen and (max-width: 481px) {
  .planaruaru_div .planaruaru_p {
    padding: 0, 10px, 10px, 10px;
    font-size: 20px;
  }
}
.planaruaru_div .planaruaru_p .fa-house {
  color: rgb(244, 101, 74);
}
.planaruaru_div .planaruaru_p .fa-check {
  padding-right: 10px;
  color: rgb(244, 101, 74);
}
.planaruaru_div .planaruaru_p .fa-tree {
  color: rgb(3, 152, 58);
}
.planaruaru_div .planaruaru_p .fa-crown {
  z-index: 2;
  padding-right: 10px;
  color: gold;
  text-shadow: #fff 3px 3px 0, #fff -3px -3px 0, #fff -3px 3px 0, #fff 3px -3px 0, #fff 0px 3px 0, #fff 0 -3px 0, #fff -3px 0 0, #fff 3px 0 0, #000 2px 2px 4px, #000 0px 2px 4px, #000 2px 0 4px, #000 0px 2px 4px;
}

.planaruaruGroup {
  box-sizing: border-box;
  width: 700px;
  margin: 0 auto;
  border: 2px solid rgb(91, 91, 91);
  border-radius: 5px;
  padding: 30px 30px 50px 30px;
  background: rgb(255, 255, 255);
}
@media screen and (max-width: 760px) {
  .planaruaruGroup {
    width: 90vw;
    padding: 15px 15px 25px 15px;
  }
}

.planaruaruItem {
  overflow: hidden;
  margin-bottom: 20px;
}

.planaruaruLabel {
  box-sizing: border-box;
  float: left;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  border-left: solid 3px rgb(255, 194, 75);
  padding: 0 10px;
  margin-bottom: 10px;
}
@media screen and (max-width: 481px) {
  .planaruaruLabel {
    margin-bottom: 10px;
  }
}
.planaruaruLabel span {
  font-size: 15px;
  color: rgb(244, 101, 74);
}

.planaruaruLabel_p {
  box-sizing: border-box;
  float: left;
  text-align: left;
  font-size: 17px;
  width: 100%;
  padding: 0 10px 10px 10px;
}
@media screen and (max-width: 481px) {
  .planaruaruLabel_p {
    font-size: 15px;
  }
}

.planaruaruInputs {
  box-sizing: border-box;
  float: left;
  text-align: left;
  width: 100%;
}

.planaruaruText {
  box-sizing: border-box;
  color: rgb(91, 91, 91);
  float: left;
  border: solid 2px rgb(91, 91, 91);
  border-radius: 5px;
  padding: 10px;
  height: 160px;
  width: 100%;
  font-size: 15px;
}

.planaruarubutton-area {
  text-align: center;
}

#planaruaruSubmit {
  background: rgb(255, 194, 75);
  border: 1px solid rgb(91, 91, 91);
  color: white;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 0 20px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px black;
  cursor: pointer;
}

#planaruaruReset {
  background: rgb(91, 91, 91);
  border: none;
  color: white;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 0 20px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px black;
  cursor: pointer;
}

#planaruaruSubmit:active,
#planaruaruReset:active {
  transform: translateY(4px);
}

/* plandatebank */
.planaruaru_one_div {
  position: relative;
}
.planaruaru_one_div img {
  width: 300px;
  transform: translateY(30%);
}
@media screen and (max-width: 760px) {
  .planaruaru_one_div img {
    width: 200px;
  }
}
.planaruaru_one_div .planaruaru_one {
  position: absolute;
  font-size: 30px;
  left: 50%;
  top: 50%;
  letter-spacing: 3px;
  transform: translate(-50%, 20%);
  z-index: 1;
}
@media screen and (max-width: 760px) {
  .planaruaru_one_div .planaruaru_one {
    font-size: 20px;
  }
}

.planaruaru_two {
  background: url(..img/tonakai.png), url(..img/aruarubgimg.png);
  background-position: right 5% top 15%, bottom;
  background-size: 60%, cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  text-align: justify;
  width: 70vw;
  margin: 0 auto;
  padding: 30px 30px 20px 30px;
  border-radius: 20px;
  border: 3px solid rgb(3, 152, 58);
  font-size: 30px;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 2px;
  /* テキストが左から右へ */
}
@media screen and (max-width: 760px) {
  .planaruaru_two {
    width: 80vw;
    font-size: 20px;
  }
}
@media screen and (max-width: 481px) {
  .planaruaru_two {
    width: 90vw;
    padding: 15px 20px 15px 20px;
  }
}
.planaruaru_two .fa-q {
  color: rgb(3, 152, 58);
  font-size: 40px;
  text-shadow: #fff 3px 3px 0, #fff -3px -3px 0, #fff -3px 3px 0, #fff 3px -3px 0, #fff 0px 3px 0, #fff 0 -3px 0, #fff -3px 0 0, #fff 3px 0 0, #000 2px 2px 4px, #000 0px 2px 4px, #000 2px 0 4px, #000 0px 2px 4px;
}
.planaruaru_two .planaruaru_two_p {
  position: relative;
  padding-top: 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: rgb(244, 101, 74);
}
.planaruaru_two .planaruaru_two_p:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgb(244, 101, 74) 0, rgb(244, 101, 74) 10px, rgb(3, 152, 58) 10px, rgb(3, 152, 58) 20px);
}
.planaruaru_two .planaruaru_two_p .fa-crown {
  z-index: 2;
  padding-right: 10px;
  color: gold;
  text-shadow: #fff 3px 3px 0, #fff -3px -3px 0, #fff -3px 3px 0, #fff 3px -3px 0, #fff 0px 3px 0, #fff 0 -3px 0, #fff -3px 0 0, #fff 3px 0 0, #000 2px 2px 4px, #000 0px 2px 4px, #000 2px 0 4px, #000 0px 2px 4px;
}
.planaruaru_two .planaruaru_two_p span {
  font-size: 20px;
  color: rgb(91, 91, 91);
}
@media screen and (max-width: 481px) {
  .planaruaru_two .planaruaru_two_p span {
    font-size: 15px;
  }
}
.planaruaru_two .textanimTrigger,
.planaruaru_two .textanimInner,
.planaruaru_two .textanimTrigger2,
.planaruaru_two .textanimInner2,
.planaruaru_two .textanimTrigger3,
.planaruaru_two .textanimInner3 {
  opacity: 0;
}
.planaruaru_two .planaruaru_two_flowing {
  opacity: 1;
  display: inline-block;
  font-weight: bold;
  text-shadow: silver 2px 1px 1px;
  overflow: hidden;
  -webkit-animation-name: flowing-anim;
          animation-name: flowing-anim;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes flowing-anim {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes flowing-anim {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.planaruaru_two .planaruaru_two_flowingInner {
  opacity: 1;
  display: inline-block;
  font-weight: bold;
  text-shadow: silver 2px 1px 1px;
  overflow: hidden;
  -webkit-animation-name: flowing-animInner;
          animation-name: flowing-animInner;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes flowing-animInner {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes flowing-animInner {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
.planaruaru_two .planaruaruImg {
  float: left;
  cursor: pointer;
}
.planaruaru_two .planaruaruImg img {
  width: 30vw;
}
.planaruaru_two .planaruaruImg figcaption {
  text-align: center;
  font-size: 25px;
  transform: translateY(-50%);
}
@media screen and (max-width: 760px) {
  .planaruaru_two .planaruaruImg figcaption {
    font-size: 15px;
  }
}

/*Magazineページ*/
#magazineTitle {
  position: relative;
  font-size: 50px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  width: 350px;
  color: #FFF;
  border: 4px solid #000;
  border-radius: 5px;
  background-color: rgb(134, 86, 13);
}
#magazineTitle .fa-book {
  margin-right: 15px;
}
#magazineTitle:before {
  /* borderのための疑似要素 */
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 15px);
  height: calc(100% - 15px);
  content: "";
  border: 4px dotted #000;
}
@media screen and (max-width: 481px) {
  #magazineTitle {
    width: 200px;
    font-size: 25px;
  }
}

.magazineGroup {
  font-size: 30px;
  /* 文字数に合わせた最小の横幅 */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  /* borderをを塗る用の色指定 */
  background-color: rgb(250, 235, 158);
  padding: 10px;
  transform: translateY(50%);
}
@media screen and (max-width: 481px) {
  .magazineGroup {
    font-size: 20px;
  }
}

.magazineContent {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 30px;
  border: solid 2px #000;
  border-radius: 5px;
  padding: 25px 0 20px 0;
  margin: auto 20px;
}
.magazineContent .magazineItem {
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border: solid 3px rgb(0, 0, 0);
  border-radius: 5px;
  background-color: rgb(134, 86, 13);
  box-shadow: 3px 3px rgb(255, 255, 255), 4px 4px rgb(0, 0, 0), 7px 7px rgb(255, 255, 255), 8px 8px rgb(0, 0, 0), 10px 10px rgb(255, 255, 255), 12px 12px rgb(134, 86, 13), 14px 14px rgb(0, 0, 0);
}
.magazineContent .magazineItem img {
  width: 250px;
  border: solid 5px rgb(0, 0, 0);
  border-radius: 10px;
  margin-bottom: 15px;
  transition-duration: 0.5s;
}
@media screen and (max-width: 400px) {
  .magazineContent .magazineItem img {
    width: 200px;
  }
}
.magazineContent .magazineItem img:hover {
  /*縮小*/
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}
.magazineContent .magazineItem h3 {
  color: #FFF;
}

/*Gameページ*/
/* GameTopページ */
#footerFixed {
  font-family: "DotGothic16", サンセリフ;
}

#gameTitle {
  font-size: 50px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  width: 350px;
  color: #FFF;
  background: #000;
  border: solid 7px rgb(255, 255, 255);
  outline: solid 4px #000;
  border-radius: 5px;
  box-shadow: 12px 12px 2px 1px rgba(67, 67, 67, 0.2);
}
#gameTitle .fa-gamepad {
  margin-right: 15px;
}
@media screen and (max-width: 481px) {
  #gameTitle {
    width: 200px;
    font-size: 25px;
    border: solid 7px rgb(255, 255, 255);
    outline: solid 4px #000;
    box-shadow: 8px 8px 2px 1px rgba(67, 67, 67, 0.2);
  }
}

.gameContent {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  justify-content: space-around;
  align-items: center;
  gap: 30px;
}
.gameContent .gameItem {
  padding: 20px;
  text-align: center;
  border: solid 7px rgb(255, 255, 255);
  outline: solid 4px #000;
  border-radius: 5px;
  background-color: rgb(0, 0, 0);
  box-shadow: 12px 12px 2px 1px rgba(67, 67, 67, 0.2);
}
.gameContent .gameItem img {
  width: 250px;
  border: solid 5px rgb(255, 255, 255);
  border-radius: 10px;
  margin-bottom: 15px;
  transition: all 0.5s ease-out;
}
.gameContent .gameItem img:hover {
  /*1.1倍に拡大*/
  border-radius: 50%;
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6);
}
.gameContent .gameItem h2 {
  color: #FFF;
}

/* Topページ以外の共通部分 */
/* calc()でラッパーの高さを調整 */
/* フッタとコンテンツが重なることもなく、2つの要素が合計で100%の高さになるように積み重なる */
/* main - header - footer */
#footerFixed {
  min-height: calc(100vh - 120px - 30px);
}
@media screen and (max-width: 481px) {
  #footerFixed {
    min-height: calc(100vh - 70px - 30px);
  }
}

.game {
  /* 親要素は中央寄せ */
  text-align: center;
  line-height: 1.5;
  letter-spacing: 2px;
}
.game h2 {
  font-size: 25px;
  margin: 20px auto 0;
  padding-top: 7px;
  text-align: center;
  width: 350px;
  height: 50px;
  color: #FFF;
  background: #000;
  border: solid 5px rgb(255, 255, 255);
  outline: solid 3px #000;
  border-radius: 5px;
}
@media screen and (max-width: 481px) {
  .game h2 {
    width: 300px;
    height: 40px;
    font-size: 20px;
  }
}
.game p {
  font-size: 20px;
  color: rgb(91, 91, 91);
  margin: 10px auto;
  /* 子要素にinline-block & left */
  /* これで中央寄せの左寄せになる */
  text-align: left;
  display: inline-block;
}

/* 花火画面専用 */
.gameHanabi {
  position: absolute;
  /* 親要素は中央寄せ */
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  line-height: 1.5;
  letter-spacing: 2px;
}
.gameHanabi h2 {
  font-size: 25px;
  margin: 20px auto 0;
  padding-top: 7px;
  text-align: center;
  height: 50px;
  color: #FFF;
}
@media screen and (max-width: 481px) {
  .gameHanabi h2 {
    width: 300px;
    height: 40px;
    font-size: 20px;
  }
}
.gameHanabi p {
  font-size: 20px;
  color: #FFF;
  margin: 10px auto;
  text-align: center;
}

/*chief & kitaris画面*/
#canvas-container {
  /* RESETボタンのためのrelative */
  position: relative;
  width: 100%;
  text-align: center;
}

#gamecanvas {
  display: inline;
  border-radius: 5px;
  background: url(../img/kitarisubgimg.PNG), rgb(255, 255, 255);
  background-size: cover;
}

/* kitarisu */
#arrow {
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  align-items: center;
}
#arrow #kitarisuRESET {
  font-family: "DotGothic16", サンセリフ;
  font-weight: bold;
  height: 30px;
  line-height: 20px;
  letter-spacing: 2px;
  margin: 5px auto;
  background: rgb(205, 205, 205);
  color: rgb(79, 79, 79);
  text-shadow: 1px 2px 2px rgb(234, 233, 233);
  border: solid 1px #2a2a2a;
  border-radius: 3px;
  border-bottom: solid 5px #2a2a2a;
  top: 50%;
  cursor: pointer;
}
#arrow #kitarisuRESET:active {
  transform: translateY(4px);
}
@media screen and (max-width: 760px) {
  #arrow #kitarisuRESET {
    /* #canvas-containerを親要素にしている */
    position: absolute;
    left: 5%;
  }
}
#arrow img {
  width: 40px;
  height: 40px;
  /* タブレットになったらボタンを表示 */
}
@media screen and (min-width: 760px) {
  #arrow img {
    display: none;
  }
}

/* 神経衰弱 */
#shinkei {
  padding: 10px 20%;
  line-height: 1.5;
  letter-spacing: 2px;
  text-align: left;
  color: rgb(91, 91, 91);
}
@media screen and (max-width: 760px) {
  #shinkei {
    padding: 10px;
  }
}
#shinkei #shinkeihigh {
  font-size: 20px;
}
#shinkei #shinkeiclock {
  font-size: 20px;
}
#shinkei #shinkeirestart {
  font-family: "DotGothic16", サンセリフ;
  font-weight: bold;
  font-size: 20px;
  background: rgb(205, 205, 205);
  color: rgb(79, 79, 79);
  text-shadow: 1px 2px 2px rgb(234, 233, 233);
  border: solid 1px #2a2a2a;
  border-radius: 3px;
  border-bottom: solid 5px #2a2a2a;
  cursor: pointer;
}
#shinkei #shinkeirestart:active {
  transform: translateY(4px);
}
#shinkei #shinkeifield {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: center;
}
#shinkei #shinkeifield .shinkeicard {
  width: 63px;
  height: 81px;
  text-align: center;
  border: 2px solid rgb(91, 91, 91);
  border-radius: 5px;
  margin: 8px;
  background: url("../img/shinkei/trump.png");
  background-size: contain;
  cursor: pointer;
}
#shinkei #shinkeifield .shinkeicard:active {
  transform: translateY(4px);
}

/* パズル */
.puzzlePhoto {
  border: solid 1px rgb(91, 91, 91);
  background: rgb(246, 246, 246);
}

.puzzleField {
  margin: 0 auto;
  padding: 0;
}
.puzzleField .puzzleContainer {
  width: 360px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  cursor: pointer;
}

.puzzleContainer .tile {
  width: 120px;
  /* ここで色指定してしまうと空のタイルまで塗りつぶされてしまう */
  /* background-color: aquamarine; */
  border: 1.5px solid rgb(91, 91, 91);
}

/* CSSの属性セレクター */
div[data-index="0"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat top left;
  background-color: aquamarine;
}

div[data-index="1"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat top center;
  background-color: aquamarine;
}

div[data-index="2"] {
  /* 空のタイルだけは画像を設定しない */
  background-color: rgb(201, 201, 201);
}

div[data-index="3"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat center left;
  background-color: aquamarine;
}

div[data-index="4"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat center center;
  background-color: aquamarine;
}

div[data-index="5"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat center right;
  background-color: aquamarine;
}

div[data-index="6"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat bottom left;
  background-color: aquamarine;
}

div[data-index="7"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat bottom center;
  background-color: aquamarine;
}

div[data-index="8"] {
  background: url("../img/kitacheese_puzzle.png") no-repeat bottom right;
  background-color: aquamarine;
}

#puzzle_Div {
  text-align: center;
}
#puzzle_Div #puzzle_Button {
  margin-top: 10px;
  font-family: "DotGothic16", サンセリフ;
  font-weight: bold;
  font-size: 20px;
  color: rgb(91, 91, 91);
  background: none;
  border: none;
}
#puzzle_Div #puzzle_Button:active {
  transform: translateY(4px);
}

#puzzleTimer {
  padding-top: 15px;
  font-size: 30px;
  text-align: center;
  color: rgb(244, 101, 74);
  margin: auto;
}

/* touch */
.shooting {
  /* リンク長押しのポップアップを無効化 */
  -webkit-touch-callout: none;
  /* テキスト長押しの選択ボックスを無効化 */
  -webkit-user-select: none;
  /* クリック・タッチイベントを無効化 */
  pointer-events: none;
}

/*Gameページのフッター共通*/
footer {
  /* 要素と被ってしまうためmainにclacを設定した
  /*下に固定*/
  /* bottom: 0;  */
  display: flex;
  /*左右中央揃え*/
  justify-content: center;
  /*上下中央揃え*/
  align-items: center;
  gap: 30px;
  width: 100%;
  height: 30px;
  font-family: "DotGothic16", サンセリフ;
  background: rgb(255, 194, 75);
  border-top: 1px solid;
  border-color: rgb(183, 183, 183);
}
footer a {
  color: inherit;
  color: rgb(82, 82, 82);
}

/* Columnページ */
#columnTitle {
  font-size: 50px;
  color: rgba(255, 255, 255, 0.85);
  margin: 50px auto 20px auto;
  padding: 20px;
  text-align: center;
  width: 350px;
  border: 4px solid rgb(178, 119, 31);
  border-radius: 5px;
  background-color: rgb(29, 84, 63);
}
#columnTitle .fa-file-pen {
  margin-right: 15px;
}
@media screen and (max-width: 481px) {
  #columnTitle {
    width: 200px;
    font-size: 25px;
  }
}

.column_div {
  text-align: center;
}
.column_div .column_p {
  padding-bottom: 20px;
  font-size: 30px;
  line-height: 1.5;
  /* 子要素にinline-block & left */
  /* これで中央寄せの左寄せになる */
  text-align: left;
  display: inline-block;
}
@media screen and (max-width: 481px) {
  .column_div .column_p {
    padding: 0, 10px, 10px, 10px;
    font-size: 20px;
  }
}

/* ボタンのスタイル */
.columnButtonOutline {
  -webkit-text-decoration: underline wavy rgb(178, 119, 31);
          text-decoration: underline wavy rgb(178, 119, 31);
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 64px;
  padding: 2px;
  margin: 10px auto; /*左右中央寄せ*/
  font-size: 30px;
  text-align: center;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, rgb(178, 119, 31), rgb(178, 119, 31));
  border-radius: 5px;
}

.columnButtonOutline::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(135deg, rgb(178, 119, 31), rgb(178, 119, 31));
  filter: blur(8px);
  border-radius: 5px; /* (buttonの高さ / 2) の値 */
  opacity: 0;
}

.columnButtonOutline_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgb(75, 75, 75);
  background-color: rgb(239, 239, 239);
  border-radius: 5px; /* (buttonの高さ / 2) の値 */
}

@media (any-hover: hover) {
  .columnButtonOutline::before {
    transition: opacity 0.2s;
    will-change: filter;
  }
  .columnButtonOutline:hover::before {
    opacity: 1;
  }
}
/* Column紹介ページ */
.column_one {
  text-align: center;
  padding: 20px 0 20px 0;
  font-size: 30px;
  /* planページ用 */
}
@media screen and (max-width: 481px) {
  .column_one {
    padding: 20px 0 10px 0;
    font-size: 20px;
  }
}
.column_one span {
  background: linear-gradient(transparent 80%, rgb(101, 211, 255) 80%);
  text-shadow: 0 5px 5px silver;
  font-size: 50px;
}
@media screen and (max-width: 1000px) {
  .column_one span {
    font-size: 40px;
    text-shadow: 0 2px 2px silver;
  }
}
@media screen and (max-width: 481px) {
  .column_one span {
    font-size: 25px;
  }
}
.column_one .fa-question {
  font-size: 50px;
}
@media screen and (max-width: 1000px) {
  .column_one .fa-question {
    font-size: 45px;
  }
}
@media screen and (max-width: 481px) {
  .column_one .fa-question {
    font-size: 35px;
  }
}
.column_one .fa-baseball {
  color: #FFF;
  text-shadow: 0 0 3px #000;
  font-size: 50px;
}
@media screen and (max-width: 1000px) {
  .column_one .fa-baseball {
    font-size: 45px;
  }
}
@media screen and (max-width: 481px) {
  .column_one .fa-baseball {
    font-size: 35px;
    text-shadow: 0 0 2px #000;
  }
}
.column_one .usoLogo {
  transform: translateX(-10px) translateY(20px);
  width: 40%;
}
@media screen and (max-width: 760px) {
  .column_one .usoLogo {
    width: 50%;
    transform: translateX(-5px) translateY(10px);
  }
}

.column_two p {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  background: #FFF;
  text-align: justify;
  width: 60vw;
  margin: 0 auto 20px;
  padding: 20px 30px 20px 30px;
  border-radius: 20px;
  border: 2px solid rgb(255, 170, 0);
  font-size: 30px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 2px;
  /* 関数呼び出し */
  margin: 20px auto;
  border: 2px solid rgb(101, 211, 255);
}
@media screen and (max-width: 760px) {
  .column_two p {
    width: 70vw;
    font-size: 20px;
    font-weight: none;
    line-height: none;
    letter-spacing: none;
  }
}
@media screen and (max-width: 481px) {
  .column_two p {
    padding: 15px 20px 15px 20px;
    width: 80vw;
  }
}
.column_two p .usoHaikei {
  width: 100%;
}
.column_two p .user_ico {
  transform: translateX(-10px) translateY(20px);
  width: 10%;
  height: 10%;
}
@media screen and (max-width: 760px) {
  .column_two p .user_ico {
    transform: translateX(-5px) translateY(10px);
  }
}
.column_two p .hennshuu_ico {
  transform: translateX(-10px) translateY(20px);
  width: 10%;
  height: 10%;
}
@media screen and (max-width: 760px) {
  .column_two p .hennshuu_ico {
    transform: translateX(-5px) translateY(10px);
  }
}
.column_two p span {
  background: linear-gradient(transparent 80%, rgb(101, 211, 255) 80%);
}

.columnUl {
  list-style: none;
  margin: 0; /* デフォルト指定上書き */
  padding: 0; /* デフォルト指定上書き */
}

/* リストの頭の丸ポチ用の疑似要素 */
.columnList:before {
  content: ""; /* 空の要素作成 */
  width: 20px; /* 幅指定 */
  height: 20px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  background-color: #0074bf; /* 背景色指定 */
  position: relative; /* 位置調整 */
  top: 3px; /* 位置指定 */
  border-radius: 50%; /* 要素を丸くする */
  margin-right: 5px; /* 余白指定 */
}

.columnList {
  width: 60vw;
  margin: 10px auto;
  padding: 20px 30px 20px 30px; /* 余白指定 */
  background-color: rgb(101, 211, 255); /* 背景色指定 */
  border-radius: 10px; /* 角丸指定 */
  margin-bottom: 5px; /* 要素と要素の間指定 */
  color: #fff; /* 文字色指定 */
  font-size: 30px; /* 文字サイズ指定 */
}
@media screen and (max-width: 760px) {
  .columnList {
    width: 70vw;
    font-size: 20px;
  }
}
@media screen and (max-width: 481px) {
  .columnList {
    padding: 15px 20px 15px 20px;
    width: 80vw;
  }
}

/* Column「やらかし図鑑」記事ページvol.1 */
/* SNSページ */
/* loadingGif */
.loadingGif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.loadingGif img {
  width: 30vw;
}

.loadingGif.active {
  opacity: 1;
  visibility: visible;
}

#snsTitle {
  font-size: 50px;
  margin: 50px auto 20px auto;
  padding: 20px;
  text-align: center;
  width: 350px;
  border: 4px solid rgb(75, 75, 75);
  border-radius: 5px;
  background-color: rgb(239, 239, 239);
}
#snsTitle .fa-instagram {
  margin-right: 15px;
}
@media screen and (max-width: 481px) {
  #snsTitle {
    width: 200px;
    font-size: 25px;
  }
}

.sns_div {
  text-align: center;
}
.sns_div .sns_p {
  padding-bottom: 20px;
  font-size: 30px;
  line-height: 1.5;
  /* 子要素にinline-block & left */
  /* これで中央寄せの左寄せになる */
  text-align: left;
  display: inline-block;
}
@media screen and (max-width: 481px) {
  .sns_div .sns_p {
    padding: 0, 10px, 10px, 10px;
    font-size: 20px;
  }
}
.sns_div span {
  color: rgb(101, 211, 255);
  font-weight: bold;
  text-shadow: 1px 2px 3px black;
}
@media screen and (max-width: 481px) {
  .sns_div span {
    text-shadow: 1px 1px 1px black;
  }
}

.snsContent {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 30px;
}
.snsContent .snsitem {
  text-align: center;
  border: solid 2px rgb(82, 82, 82);
  background: rgb(82, 82, 82);
  border-radius: 5px;
  box-shadow: 12px 12px 2px 1px rgba(67, 67, 67, 0.5);
  /* 何をしてもmin-widthのサイズにならん! */
}
@media screen and (max-width: 481px) {
  .snsContent .snsitem {
    border: none;
    border-radius: none;
    box-shadow: none;
  }
}

.snsNo {
  color: #FFF;
}

/* FAQページ */
#faqTitle {
  position: relative;
  font-size: 50px;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  width: 350px;
  color: #FFF;
  border: 4px solid rgb(91, 91, 91);
  border-radius: 5px;
  background-color: rgb(255, 170, 0);
}
@media screen and (max-width: 481px) {
  #faqTitle {
    width: 200px;
    font-size: 25px;
  }
}
#faqTitle .fa-comment-dots {
  margin-right: 15px;
}

.ac {
  width: 70vw;
  font-size: 25px;
  margin: 0 auto;
  text-align: center;
  /* アコーディオンメニュー全体のサイズ・位置 */
  /* クリック領域 */
  /* クリックしたら表示される領域 */
}
@media screen and (max-width: 760px) {
  .ac {
    width: 85vw;
    font-size: 20px;
  }
}
@media screen and (max-width: 481px) {
  .ac {
    width: 90vw;
  }
}
.ac .ac-parent {
  height: 50px;
  padding-left: 1em;
  border: 1.5px solid rgb(91, 91, 91);
  border-radius: 5px;
  background-color: rgb(255, 170, 0);
  color: #fff;
  text-align: left;
  line-height: 50px;
  cursor: pointer;
}
@media screen and (max-width: 481px) {
  .ac .ac-parent {
    font-size: 20px;
  }
}
@media screen and (max-width: 400px) {
  .ac .ac-parent {
    font-size: 17px;
  }
}
.ac .ac-child {
  display: none;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: bold;
  border: 1.5px solid rgb(91, 91, 91);
  border-radius: 5px;
  line-height: 1.5;
  padding: 1em 1em;
  background-color: whitesmoke;
  text-align: left;
}

/* Contactページ */
#contactMain {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

#contactTitle {
  font-size: 50px;
  margin: 50px auto 20px auto;
  padding: 20px;
  text-align: center;
  width: 350px;
  color: #FFF;
  border: 4px solid rgb(239, 239, 239);
  border-radius: 5px;
  background-color: rgb(91, 91, 91);
}
@media screen and (max-width: 481px) {
  #contactTitle {
    width: 200px;
    font-size: 25px;
  }
}
#contactTitle .fa-keyboard {
  margin-right: 15px;
}

.contact_div {
  text-align: center;
}
.contact_div .contact_p {
  padding-bottom: 20px;
  font-size: 30px;
  line-height: 1.5;
  /* 子要素にinline-block & left */
  /* これで中央寄せの左寄せになる */
  text-align: left;
  display: inline-block;
}
.contact_div .contact_p span {
  background: linear-gradient(transparent 90%, rgb(244, 101, 74) 90%);
}
@media screen and (max-width: 481px) {
  .contact_div .contact_p {
    padding: 0, 10px, 10px, 10px;
    font-size: 20px;
  }
}

.contactGroup {
  box-sizing: border-box;
  width: 600px;
  margin: 0 auto;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 5px;
  padding: 30px 30px 50px 30px;
  background: rgb(91, 91, 91);
}
@media screen and (max-width: 481px) {
  .contactGroup {
    width: 380px;
    padding: 15px 15px 25px 15px;
  }
}
@media screen and (max-width: 400px) {
  .contactGroup {
    width: 360px;
  }
}

.contactForm {
  width: 550px;
}
@media screen and (max-width: 481px) {
  .contactForm {
    width: 350px;
  }
}

.contactItem {
  overflow: hidden;
  margin-bottom: 20px;
}

.contactLabel {
  float: left;
  text-align: left;
  font-size: 20px;
  width: 200px;
  color: rgb(255, 255, 255);
  border-left: solid 3px rgb(255, 194, 75);
  padding-left: 10px;
}
@media screen and (max-width: 481px) {
  .contactLabel {
    margin-bottom: 10px;
  }
}

.contactInputs {
  float: left;
  text-align: left;
  width: 300px;
  color: rgb(255, 255, 255);
}

input[type=radio] {
  vertical-align: baseline;
}

input[type=text],
input[type=email] {
  border: solid 2px rgb(91, 91, 91);
  color: rgb(91, 91, 91);
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
}

.contactoptions {
  float: left;
  text-align: left;
  font-size: 15px;
  width: 150px;
}

.contactText {
  float: left;
  color: rgb(91, 91, 91);
  border: solid 2px rgb(91, 91, 91);
  border-radius: 5px;
  padding: 10px;
  height: 160px;
  width: 300px;
  font-size: 15px;
}

.button-area {
  text-align: center;
}

input[type=submit] {
  background: rgb(255, 194, 75);
  border: none;
  color: white;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px black;
  cursor: pointer;
}

input[type=reset] {
  background: rgb(255, 255, 255);
  border: none;
  color: rgb(91, 91, 91);
  font-size: 17px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px black;
  cursor: pointer;
}

input[type=submit]:active,
input[type=reset]:active {
  transform: translateY(4px);
}

/* Contact_answerページ */
.answer {
  text-align: center;
  padding: 0 10%;
}
@media screen and (max-width: 481px) {
  .answer {
    padding: 0;
  }
}
.answer .answer_p {
  font-size: 30px;
  padding: 20px;
  text-align: left;
  display: inline-block;
}
.answer .answer_p span {
  font-size: 20px;
}
@media screen and (max-width: 481px) {
  .answer .answer_p span {
    font-size: 15px;
  }
}
@media screen and (max-width: 481px) {
  .answer .answer_p {
    padding: 20px 10px;
    font-size: 20px;
  }
}

.answer_img {
  text-align: center;
}
@media screen and (max-width: 481px) {
  .answer_img img {
    width: 100vw;
  }
}
/*# sourceMappingURL=style.css.map */